import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { toJS } from 'mobx'
import { observer, inject } from 'mobx-react'
import { List } from 'antd-mobile'

const Item = List.Item
const Brief = Item.Brief

@inject('articleStore')
@observer
class GeneralList extends Component {
  static propTypes = {
    articleStore: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
  };

  componentDidMount() {
    const { match } = this.props
    const gid = match.params.gid
    this.props.articleStore.getGeneralList(gid)
  }

  goTo = (linkUrl) => {
    window.location.href = linkUrl
  };

  render() {
    const { articleStore } = this.props
    const list = toJS(articleStore.generalList)

    return (
      <div>
        <List>
          {list.map(item => (
            <Item
              arrow="horizontal"
              onClick={() => this.goTo(item.linkUrl)}
              key={item.id}
              thumb={item.content}
              multipleLine
            >
              {item.title} <Brief>{item.subTitle}</Brief>
            </Item>
          ))}
        </List>
      </div>
    )
  }
}

export default GeneralList
